<template>
  <div>
    <div class="block6 flex-col">
      <div class="outer2 flex-col">
        <div class="section5 flex-col">
          <div class="section6 flex-row justify-between">
            <span class="word9">基本信息</span>
            <!-- <div class="bd7 flex-col"> -->
            <el-button type="primary" size="mini" @click="personlinstall">人员设置</el-button>
            <!-- </div> -->
          </div>
        </div>
        <div class="section7 flex-row">
          <div class="SingleAvatar24 flex-col justify-center align-center">
            <img
              class="label2"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/pss42tzil4zuohnjfyf0t72nef70l2t8rsf3463d5e-4a54-4cac-96d6-e748bc329066"
            />
          </div>
          <div class="group1 flex-col justify-between">
            <span class="word11">名称</span>
            <span class="word12">类别</span>
          </div>
          <div class="group2 flex-col justify-between">
            <span class="word13">微信用户</span>
            <span class="txt3">微信用户</span>
          </div>
          <div class="group3 flex-col justify-between">
            <span class="word14">手机</span>
            <span class="txt4">地区</span>
          </div>
          <span class="txt5">15789562122</span>
          <span class="txt6">性别</span>
          <span class="info3">—</span>
          <div class="group4 flex-col justify-between">
            <span class="word15">有效点数</span>
            <span class="word16">赠送点数</span>
          </div>
          <div class="group5 flex-col justify-between">
            <span class="info4">0点</span>
            <span class="txt7">0点</span>
          </div>
        </div>
        <div class="section8 flex-col"></div>
        <span class="info5">用户标签</span>
        <div class="section9 flex-col justify-center">
          <span class="word17">＋新标签</span>
        </div>
      </div>
    </div>
    <div>
      <div class="section10 flex-col">
        <div class="mod2 flex-row">
          <span
            v-for="(item,index) in options"
            :class="current==index?'optionitems':'optionitem'"
            @click="chaged(index)"
            :key="index"
          >{{item.text}}</span>
        </div>
        <el-button
          style="margin-right:12px;"
          v-if="current==1"
          type="primary"
          size="mini"
          @click.native="rechargepop"
        >充值</el-button>
        <div v-if="current==2" style="display:flex">
          <el-button type="primary" size="mini" @click.native="addappointment">添加预约</el-button>
          <el-button
            style="margin-right:12px;"
            type="primary"
            size="mini"
            @click.native="fixedseat"
          >固定座位</el-button>
        </div>
        <el-button
          style="margin-right:12px;"
          v-if="current==3"
          type="primary"
          size="mini"
          @click.native="paypackage"
        >购买套餐</el-button>
      </div>
      <div class="block7 flex-col">
        <div v-if="current==0">
          <div class="block8 flex-col">
            <el-table :data="table1" border style="width: 99%">
              <el-table-column prop="date" label="套餐修改记录日期"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="range" label="可用范围"></el-table-column>
              <el-table-column prop="time" label="剩余次数/小时"></el-table-column>
              <el-table-column prop="servicelife" label="使用期限"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="statedate(scope.$index, tableData)"
                    type="text"
                  >修改有效期</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="layer3 flex-row">
              <div class="block10 flex-col"></div>
              <span class="info6">过期套餐</span>
            </div>
            <el-table
              :data="table2"
              :header-cell-style="headerStyle"
              :cell-style="cellStyle"
              style="width: 99%;background:#F1F1F1;border-top: 1px solid #E1E4E8;border-left: 1px solid #E1E4E8;border-right: 1px solid #E1E4E8;"
            >
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="range" label="可用范围"></el-table-column>
              <el-table-column prop="time" label="剩余次数/小时"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="statedate(scope.$index, tableData)"
                    type="text"
                  >修改有效期</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div v-if="current==1">
          <el-table :data="tableData" style="width: 99%" key="true">
            <el-table-column prop="rechargepoint" label="充值点"></el-table-column>
            <el-table-column prop="giftpoint" label="赠送点"></el-table-column>
            <el-table-column prop="price" label="支付金额"></el-table-column>
            <el-table-column prop="method" label="支付方式"></el-table-column>
            <el-table-column prop="time" label="支付时间"></el-table-column>
            <el-table-column label="点">
              <el-table-column prop="effectivepoint" label="有效点"></el-table-column>
              <el-table-column prop="invalidpoint" label="无效点"></el-table-column>
              <el-table-column prop="residualpoint" label="剩余点"></el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="有效期"></el-table-column>
            <el-table-column prop="store" label="用户消费门店"></el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text">扣减</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="current==2">
          <el-table border :data="tableDatarecord" style="width: 99%" :key="keyValue">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="shop" label="门店"></el-table-column>
            <el-table-column prop="seatdetails" label="座位详情"></el-table-column>
            <el-table-column prop="paymethod" label="支付方式"></el-table-column>
            <el-table-column prop="orderstate" label="订单状态">
              <template slot-scope="scope" style="display:flex;align-items: center;">
                <img
                  src="../../assets/img/dui.png"
                  v-if="scope.row.isbool"
                  style="width:14px;height:14px;margin-right:6px;"
                  alt
                />
                <span>{{scope.row.orderstate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="refund(scope.$index, tableDatarecord)"
                  type="text"
                >退款</el-button>
                <el-button
                  @click.native.prevent="viewdetails(scope.$index, tableDatarecord)"
                  type="text"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="current==3">
          <el-table :data="tableData3" style="width: 99%" current-row-key="true">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column label="点">
              <el-table-column prop="beforechange" label="变动前"></el-table-column>
              <el-table-column prop="money" label="费用"></el-table-column>
              <el-table-column prop="afterchange" label="变动后"></el-table-column>
            </el-table-column>
            <el-table-column prop="wechat" label="微信"></el-table-column>
            <el-table-column prop="comments" label="大众点评"></el-table-column>
            <el-table-column prop="setmeal" label="套餐"></el-table-column>
            <el-table-column prop="reduction" label="减免"></el-table-column>
            <el-table-column prop="orderstate" label="订单状态"></el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
          </el-table>
        </div>
        <div v-if="current==5">
          <el-table border :data="tableData5" style="width: 99%" :key="keyValue">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="shop" label="门店"></el-table-column>
            <el-table-column prop="lockseat" label="锁定座位"></el-table-column>
            <el-table-column prop="homedatail" label="会议室详情"></el-table-column>
            <el-table-column prop="orderstate" label="订单状态">
              <template slot-scope="scope" style="display:flex;align-items: center;">
                <img
                  src="../../assets/img/dui.png"
                  v-if="scope.row.isbool"
                  style="width:14px;height:14px;margin-right:6px;"
                  alt
                />
                <span>{{scope.row.orderstate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="refund5(scope.$index, tableData5)" type="text">退款</el-button>
                <el-button
                  @click.native.prevent="viewdetails5(scope.$index, tableData5)"
                  type="text"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog title="成员设置" :visible.sync="dialogVisible" width="30%">
      <el-form
        ref="formInfo"
        :rules="rules"
        :model="formInfo"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="选择成员类型" prop="type">
          <el-select style="width:100%" v-model="formInfo.type" clearable placeholder="请选择">
            <el-option v-for="item in type" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="closeDialog()">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="扣减点数" :visible.sync="delpopup" width="30%">
      <el-form
        ref="deduction"
        :rules="rules"
        :model="deduction"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="到期日期" prop="date">
          <span>{{deduction.date}}</span>
        </el-form-item>
        <el-form-item label="扣减点" prop="delpoint">
          <el-input v-model="deduction.delpoint">
            <template slot="append">点</template>
          </el-input>
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-input v-model="deduction.time"></el-input>
        </el-form-item>
        <el-form-item label="扣减店铺" prop="shop">
          <span>{{deduction.shop}}</span>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="deduction.remarks"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="closeDialogs()">取消</el-button>
          <el-button type="primary" @click="submitForms('deduction')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="充值记录" :visible.sync="rechargepopup" width="30%">
      <el-form
        ref="recharge"
        :rules="rules"
        :model="recharge"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="充值点" prop="point">
          <el-input v-model="recharge.point">
            <template slot="append">点</template>
          </el-input>
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-input v-model="recharge.time"></el-input>
        </el-form-item>
        <el-form-item label="充值店铺" prop="shop">
          <el-input v-model="recharge.shop" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="recharge.remarks"></el-input>
        </el-form-item>
        <el-form-item label="需付金额" prop="price">
          <el-input v-model="recharge.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="过期时间" prop="expirationtime">
          <el-date-picker
            v-model="datevalue"
            align="right"
            type="date"
            placeholder="选择日期时间"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="rechargecloseDialogs()">取消</el-button>
          <el-button type="primary" @click="rechargesubmitForms('recharge')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加预约" :visible.sync="appointment" width="50%">
      <el-form
        ref="formappointment"
        :rules="rules"
        :model="formappointment"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="预约店铺" prop="shop">
          <el-input v-model="formappointment.shop" disabled></el-input>
        </el-form-item>
        <el-form-item label="预约日期" prop="date">
          <el-input v-model="formappointment.date" placeholder="请选择"></el-input>
        </el-form-item>
        <el-form-item label="预约开始" prop="appointmentstart">
          <el-input v-model="formappointment.appointmentstart" placeholder="请选择"></el-input>
        </el-form-item>
        <el-form-item label="结束日期" prop="enddate">
          <el-input v-model="formappointment.enddate" placeholder="请选择"></el-input>
        </el-form-item>
        <el-form-item label="预约结束" prop="appointmentend">
          <el-select style="width:100%" v-model="formappointment.appointmentend" placeholder="请选择">
            <el-option
              v-for="item in appointmentends"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预约座位" prop="reservedseats">
          <div>经济型</div>
          <div style="display:flex;flex-wrap:wrap;">
            <div
              v-for="(item,index) in itemdatas"
              :key="index"
              @click="ckeckdatas(item)"
              :class="isActiveFn(item)?'active':item.ischecked==true?'itemcont':'itemconts'"
            >
              {{item.text}}
              <img
                src="../../assets/img/duihao.png"
                v-if="isActiveFn(item)"
                style="width:26px;height:24px;position: absolute;"
                alt
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选择套餐" prop="selectpackage">
          <el-select style="width:100%" v-model="formappointment.selectpackage" placeholder="请选择">
            <el-option
              v-for="item in packagedata"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="formappointment.remarks"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm('formappointment')">重置</el-button>
          <el-button type="primary" @click="appointmentsubmitForm('formappointment')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="购买套餐" :visible.sync="paypopup" width="50%">
      <el-form
        ref="payform"
        :rules="rules"
        :model="payform"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="充值店铺" prop="shop">
          <el-input v-model="payform.shop" disabled></el-input>
        </el-form-item>
        <el-form-item label="套餐选择" prop="mealchoose">
          <el-select style="width:100%" v-model="payform.mealchoose" placeholder="请选择">
            <el-option
              v-for="item in mealchoose"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="购买数量" prop="num">
        <el-input-number v-model="payform.num" @change="handleChange" :min="1" :max="10" label="购买数量"></el-input-number>
        </el-form-item>
        <el-form-item label="减免金额" prop="price">
          <el-input v-model="payform.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="payform.remarks"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="paycancel('payform')">取消</el-button>
          <el-button type="primary" @click="payconfig('payform')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="预约详情" :visible.sync="appointmentdetails" width="50%">
      <div class="tips1">
        <div class="centtip">
          <div style="display:flex;justify-content: space-between;margin-bottom:42px;">
            <div>莲花店 - 福田区梅林街道雕塑家园2710</div>
            <div>01</div>
            <div>经济型</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>已完成</div>
            <div>预定日期：2022-01-07</div>
            <div>10:00 - 12:00</div>
          </div>
        </div>
      </div>
      <div class="tips2">
        <div class="centtip">
          <div style="display:flex;justify-content: space-between;margin-bottom:42px;">
            <div>莲花店 - 福田区梅林街道雕塑家园2710</div>
            <div>01</div>
            <div>经济型</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>已完成</div>
            <div>预定日期：2022-01-07</div>
            <div>10:00 - 12:00</div>
          </div>
        </div>
      </div>
      <el-button
        type="primary"
        style="position:absolute;right:30px;bottom:35px"
        @click="appointmentdetails=false"
      >关闭</el-button>
    </el-dialog>
    <el-dialog title="会议室详情" :visible.sync="roomdetails" width="50%">
      <div class="tips1">
        <div class="centtip">
          <div style="display:flex;justify-content: space-between;margin-bottom:42px;">
            <div>莲花店 - 福田区梅林街道雕塑家园2710</div>
            <div>01</div>
            <div>经济型</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>已完成</div>
            <div>预定日期：2022-01-07</div>
            <div>10:00 - 12:00</div>
          </div>
        </div>
      </div>
      <div class="tips2">
        <div class="centtip">
          <div style="display:flex;justify-content: space-between;margin-bottom:42px;">
            <div>莲花店 - 福田区梅林街道雕塑家园2710</div>
            <div>01</div>
            <div>经济型</div>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <div>已完成</div>
            <div>预定日期：2022-01-07</div>
            <div>10:00 - 12:00</div>
          </div>
        </div>
      </div>
      <el-button
        type="primary"
        style="position:absolute;right:30px;bottom:35px"
        @click="roomdetails=false"
      >关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      appointmentdetails: false,
      keyValue: true,
      keyValues: true,
      paypopup: false,
      roomdetails: false,
      datevalue: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      rules: {
        num:[
          {
          required: true, message: "请输入购买数量", trigger: "change" }
        ],
        date: [
          { required: true, message: "请输入预约日期", trigger: "change" }
        ],
        appointmentstart: [
          { required: true, message: "请选择预约开始时间", trigger: "change" }
        ],
        appointmentend: [
          { required: true, message: "请选择预约结束时间", trigger: "change" }
        ],
        selectpackage: [
          { required: true, message: "请选择套餐", trigger: "change" }
        ],
        enddate: [
          { required: true, message: "请选择结束日期", trigger: "change" }
        ],
        delpoint: [
          { required: true, message: "请输入扣减点", trigger: "change" }
        ],
        point: [{ required: true, message: "请输入充值点", trigger: "change" }],
        time: [{ required: true, message: "请输入时间", trigger: "change" }],
        shop: [{ required: true, message: "请输入扣减店铺", trigger: "change" }],
        mealchoose:[{ required: true, message: "请选择套餐", trigger: "change" }]
      },
      delpopup: false,
      rechargepopup: false,
      appointment: false,
      tableDatarecord: [
        {
          date: "2021-12-30",
          shop: "莲花北店",
          seatdetails: "01   【16::00  —  18:00】",
          paymethod: "微信支付",
          isbool: true,
          orderstate: "预定成功"
        },
        {
          date: "2021-12-30",
          shop: "莲花北店",
          seatdetails: "01   【16::00  —  18:00】",
          paymethod: "微信支付",
          isbool: true,
          orderstate: "预定成功"
        }
      ],
      table1: [],
      table2: [
        {
          name: "到店礼：2小时体验",
          range:
            "座位类型：  可用门店：龙华店-龙华区美丽AAA大厦1311A 莲花北店-福田区梅林街道雕塑家园2710 车公庙店-福田区香蜜",
          time: "0次"
        }
      ],
      itemlist: [],
      itemdatas: [
        {
          id: 1,
          text: "01",
          ischecked: true
        },
        {
          id: 2,
          text: "02",
          ischecked: true
        },
        {
          id: 3,
          text: "03",
          ischecked: true
        },
        {
          id: 4,
          text: "04",
          ischecked: false
        },
        {
          id: 5,
          text: "05",
          ischecked: false
        },
        {
          id: 6,
          text: "06",
          ischecked: true
        },
        {
          id: 7,
          text: "07",
          ischecked: true
        },
        {
          id: 8,
          text: "08",
          ischecked: true
        },
        {
          id: 9,
          text: "09",
          ischecked: true
        },
        {
          id: 10,
          text: "10",
          ischecked: true
        },
        {
          id: 11,
          text: "11",
          ischecked: true
        },
        {
          id: 12,
          text: "12",
          ischecked: true
        },
        {
          id: 13,
          text: "13",
          ischecked: true
        },
        {
          id: 14,
          text: "14",
          ischecked: true
        },
        {
          id: 15,
          text: "15",
          ischecked: true
        }
      ],
      tableData: [
        {
          date: "2016-05-03",
          rechargepoint: "60点",
          giftpoint: "100点",
          price: "200元",
          method: "线下付款",
          time: "2021-05-03",
          effectivepoint: "150点",
          invalidpoint: "30点",
          residualpoint: "320点",
          store: "金穗店",
          remarks: "少放糖谢谢",
          operation: "扣减"
        },
        {
          date: "2016-05-03",
          rechargepoint: "60点",
          giftpoint: "100点",
          price: "200元",
          method: "线下付款",
          time: "2021-05-03",
          effectivepoint: "150点",
          invalidpoint: "30点",
          residualpoint: "320点",
          store: "金穗店",
          remarks: "少放糖谢谢",
          operation: "扣减"
        },
        {
          date: "2016-05-03",
          rechargepoint: "60点",
          giftpoint: "100点",
          price: "200元",
          method: "线下付款",
          time: "2021-05-03",
          effectivepoint: "150点",
          invalidpoint: "30点",
          residualpoint: "320点",
          store: "金穗店",
          remarks: "少放糖谢谢",
          operation: "扣减"
        },
        {
          date: "2016-05-03",
          rechargepoint: "60点",
          giftpoint: "100点",
          price: "200元",
          method: "线下付款",
          time: "2021-05-03",
          effectivepoint: "150点",
          invalidpoint: "30点",
          residualpoint: "320点",
          store: "金穗店",
          remarks: "少放糖谢谢",
          operation: "扣减"
        },
        {
          date: "2016-05-03",
          rechargepoint: "60点",
          giftpoint: "100点",
          price: "200元",
          method: "线下付款",
          time: "2021-05-03",
          effectivepoint: "150点",
          invalidpoint: "30点",
          residualpoint: "320点",
          store: "金穗店",
          remarks: "少放糖谢谢",
          operation: "扣减"
        }
      ],
      tableData3: [
        {
          date: "2022-01-07",
          type: "消费",
          beforechange: "20积分",
          money: "—20积分",
          afterchange: "/",
          wechat: "/",
          comments: "/",
          setmeal: "/",
          reduction: "/",
          orderstate: "交易成功",
          remarks: "/"
        },
        {
          date: "2022-01-07",
          type: "消费",
          beforechange: "10积分",
          money: "—20积分",
          afterchange: "/",
          wechat: "/",
          comments: "支付1元",
          setmeal: "到店礼：2小时体验",
          reduction: "/",
          orderstate: "交易成功",
          remarks: "/"
        }
      ],
      tableData5: [
        {
          date: "2022-01-07",
          shop: "莲花店-福田区梅林街道雕塑家园2710",
          lockseat: "",
          homedatail: "会议室【08:30 - 16:30】",
          orderstate: "预定成功",
          isbool: true
        },
        {
          date: "2022-01-07",
          shop: "莲花店-福田区梅林街道雕塑家园2710",
          lockseat: "",
          homedatail: "会议室【08:30 - 16:30】",
          orderstate: "预定成功",
          isbool: true
        }
      ],
      appointmentends: [
        {
          id: 12,
          value: "10:30"
        },
        {
          id: 14,
          value: "11:30"
        },
        {
          id: 13,
          value: "12:30"
        }
      ],
      packagedata: [
        {
          id: "1",
          value: "套餐1"
        },
        {
          id: "2",
          value: "套餐2"
        },
        {
          id: "3",
          value: "套餐3"
        }
      ],
      formappointment: {
        shop: "莲花店",
        date: "2022-01-06",
        appointmentstart: "10:30",
        enddate: "2022-01-06",
        appointmentend: "",
        selectpackage: "",
        remarks: "",
        reservedseats: ""
      },
      mealchoose: [
        {
          id: "1",
          value: "套餐1"
        },
        {
          id: "2",
          value: "套餐2"
        },
        {
          id: "3",
          value: "套餐3"
        }
      ],
      payform: {
        shop: "莲花店",
        mealchoose: "",
        price: "",
        num: 1,
        remarks: ""
      },
      // selevalue:'',
      // selevalue1:'',
      dialogVisible: false,
      type: [
        {
          id: 1,
          text: "测试"
        },
        {
          id: 2,
          text: "管理员"
        }
      ],
      formInfo: {
        type: ""
      },
      deduction: {
        date: "2022-01-08",
        delpoint: "0",
        time: "2022-01-07 15:555:26",
        shop: "车公庙店",
        remarks: ""
      },
      recharge: {
        point: "",
        time: "2022-01-07 15:555:26",
        shop: "车公庙店",
        remarks: "",
        price: "",
        expirationtime: ""
      },
      current: 0,
      options: [
        {
          id: 2,
          text: "套餐记录"
        },
        {
          id: 3,
          text: "充值记录"
        },
        {
          id: 22,
          text: "预约记录"
        },
        {
          id: 21,
          text: "消费记录"
        },
        {
          id: 28,
          text: "邀请记录"
        },
        {
          id: 42,
          text: "会议室记录"
        }
      ]
    };
  },
  methods: {
    headerStyle() {
      return "background:#f1f1f1;";
    },
    cellStyle() {
      return "background:#f8f8f8;padding-left:12px;";
    },
    chaged(e) {
      this.current = e;
    },
    personlinstall() {
      this.dialogVisible = true;
    },
    // 关闭操作
    closeDialog() {
      this.dialogVisible = false;
    },
    closeDialogs() {
      this.delpopup = false;
    },
    rechargecloseDialogs() {
      this.rechargepopup = false;
    },
    resetForm(formappointment) {
      this.$refs[formappointment].resetFields();
      this.appointmentend = "";
      this.selectpackage = "";
      this.formappointment.date = "";
      this.formappointment.enddate = "";
      this.formappointment.appointmentstart = "";
    },
    submitForm(formInfo) {
      this.$refs[formInfo].validate(valid => {
        if (valid) {
          this.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    submitForms(deduction) {
      this.$refs[deduction].validate(valid => {
        if (valid) {
          this.delpopup = false;
        } else {
          return false;
        }
      });
    },
    rechargesubmitForms(recharge) {
      this.$refs[recharge].validate(valid => {
        if (valid) {
          this.rechargepopup = false;
        } else {
          return false;
        }
      });
    },
    appointmentsubmitForm(formappointment) {
      this.$refs[formappointment].validate(valid => {
        if (valid) {
          this.appointment = false;
        } else {
          return false;
        }
      });
    },
    deleteRow() {
      this.delpopup = true;
    },
    rechargepop() {
      this.rechargepopup = true;
    },
    addappointment() {
      this.appointment = true;
    },
    fixedseat() {
      this.appointment = true;
    },
    paypackage() {
      this.paypopup = true;
    },
    paycancel(){
      this.paypopup = false
    },
    payconfig(payform) {
      this.$refs[payform].validate(valid => {
        if (valid) {
          this.paypopup = false
        } else {
          return false;
        }
      });

    },
    ckeckdatas(item) {
      if (item.ischecked == false) {
        return false;
      }
      let index = this.itemlist.findIndex(ele => {
        return ele === item;
      });
      if (index != -1) {
        this.itemlist.splice(index, 1); //取消选中
      } else {
        this.itemlist.push(item); //选中
      }
    },
    isActiveFn(item) {
      //判断元素是否选中
      //index如果不是-1，那就说明是被选中的
      let index = this.itemlist.findIndex(ele => {
        return ele === item;
      });
      if (index != -1) {
        return true;
      } else {
        return false;
      }
    },
    refund() {
      this.$confirm("确定退款吗?此订单将取消并全额退还。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消'
          // });
        });
    },
    refund5() {
      this.$confirm("确定退款吗?此订单将取消并全额退还。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消'
          // });
        });
    },
    viewdetails() {
      this.appointmentdetails = true;
    },
    viewdetails5() {
      this.roomdetails = true;
    },
    handleChange(value) {
   
    }
  }
};
</script>
<style scoped>
.el-table .cell {
  display: flex !important;
  align-items: center !important;
}
</style>
<style lang="scss" scoped>
.block6 {
  background-color: rgba(255, 254, 250, 1);
  height: 232px;
  border: 1px solid rgba(240, 242, 245, 1);
  width: 1668px;
  margin: 26px 0 15px 12px;
}

.outer2 {
  width: 1667px;
  height: 211px;
}

.section5 {
  background-color: rgba(249, 249, 249, 1);
  height: 49px;
  border-right: 1px solid rgba(240, 242, 245, 1);
  border-bottom: 1px solid rgba(240, 242, 245, 1);
  width: 100%;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
}

.section6 {
  width: 1644px;
  height: 28px;
  display: flex;
  justify-content: space-between;
}

.word9 {
  width: 63px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-top: 6px;
  display: block;
}

.bd7 {
  background-color: rgba(64, 158, 255, 1);
  border-radius: 4px;
  height: 28px;
  width: 80px;
  padding: 7px 0 0 13px;
}

.word10 {
  width: 55px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
}

.section7 {
  width: 1334px;
  height: 65px;
  margin: 20px 0 0 26px;
  display: flex;
}

.SingleAvatar24 {
  background-color: rgba(192, 196, 204, 1);
  border-radius: 50%;
  height: 60px;
  margin-top: 5px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label2 {
  width: 28px;
  height: 30px;
}

.group1 {
  width: 27px;
  height: 46px;
  margin-left: 29px;
}

.word11 {
  width: 27px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
}
.word12 {
  width: 26px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 18px;
  display: block;
}

.group2 {
  width: 54px;
  height: 46px;
  margin-left: 12px;
}

.word13 {
  width: 54px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
}

.txt3 {
  width: 54px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 18px;
  display: block;
}

.group3 {
  width: 28px;
  height: 45px;
  margin-left: 294px;
}

.word14 {
  width: 27px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-left: 1px;
  display: block;
}

.txt4 {
  width: 28px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 18px;
  display: block;
}

.txt5 {
  width: 83px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
  margin: 1px 0 0 13px;
}

.txt6 {
  width: 27px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-left: 262px;
  display: block;
}

.info3 {
  width: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
  margin: 8px 0 0 13px;
}

.group4 {
  width: 56px;
  height: 46px;
  margin-left: 337px;
}

.word15 {
  width: 55px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-left: 1px;
  display: block;
}

.word16 {
  width: 56px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 18px;
  display: block;
}

.group5 {
  width: 20px;
  height: 46px;
  margin-left: 7px;
}

.info4 {
  width: 20px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
}

.txt7 {
  width: 20px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 18px;
  display: block;
}

.section8 {
  width: 1566px;
  height: 1px;
  background: rgba(240, 242, 245, 1);
  margin: 11px 0 0 101px;
}
.info5 {
  width: 56px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
  margin: 16px 0 0 114px;
}

.section9 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 2px;
  height: 32px;
  border: 1px solid rgba(240, 242, 245, 1);
  width: 80px;
  margin: 3px 0 0 126px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.word17 {
  width: 54px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
}
.section10 {
  background-color: rgba(249, 249, 249, 1);
  z-index: 103;
  height: 40px;
  border-top: 1px solid rgba(240, 242, 245, 1);
  border-left: 1px solid rgba(240, 242, 245, 1);
  border-right: 1px solid rgba(240, 242, 245, 1);
  width: 1668px;
  margin-left: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: absolute;
  left: 12px;
  top: 344px; */
}

.mod2 {
  width: 569px;
  height: 40px;
  display: flex;
  cursor: pointer;
}

.section11 {
  background-color: rgba(255, 255, 255, 1);
  height: 40px;
  border: 1px solid rgba(240, 242, 245, 1);
  width: 98px;
  padding: 12px 0 0 20px;
}

.word24 {
  width: 56px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(64, 158, 255, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
}

.info10 {
  width: 56px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
  margin: 13px 0 0 21px;
}

.info11 {
  width: 56px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
  margin: 13px 0 0 41px;
}

.block7 {
  background-color: rgba(255, 255, 255, 1);
  height: auto;
  border: 1px solid rgba(240, 242, 245, 1);
  width: 1668px;
  margin: 0 0 0 12px;
  padding: 15px 0 0 15px;
}

.block8 {
  height: auto;
  margin-bottom: 26px;
}

.layer3 {
  width: 839px;
  height: 27px;
  margin: 20px 0 10px 10px;
  display: flex;
}

.block10 {
  background-color: rgba(186, 186, 186, 1);
  width: 10px;
  height: 16px;
  margin-top: 11px;
}

.info6 {
  width: 56px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  display: block;
  margin: 12px 0 0 13px;
}

.info7 {
  width: 55px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(145, 145, 145, 1);
  font-size: 14px;
  font-family: SourceHanSansSC-Normal;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-left: 705px;
  display: block;
}
.optionitems {
  width: 98px;
  height: 40px;
  background: #ffffff;
  // border-left: 1px solid #f0f2f5;
  // border-right: 1px solid #f0f2f5;
  // border-bottom: 1px solid #f0f2f5;
  border: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  font-size: 14px;
}
.optionitems:nth-child(1) {
  border-left: none;
}
.cell{
  display: flex;
  align-items: center;
}
.optionitem {
  background-color: rgba(249, 249, 249, 1);
  color: rgba(51, 51, 51, 1);
  width: 98px;
  height: 40px;
  display: flex;
  border-bottom: 1px solid #f0f2f5;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.active {
  position: relative;
  width: 52px;
  height: 52px;
  background: #512cff;
  border-radius: 6px;
  color: #512cff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-bottom: 8px;
}
.itemcont {
  width: 52px;
  height: 52px;
  background: #ffffff;
  border: 1px solid #512cff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-bottom: 8px;
  color: #101010;
  font-size: 20px;
}
.itemconts {
  cursor: not-allowed;
  width: 52px;
  height: 52px;
  background: #ffffff;
  border: 1px solid #bbbbbb;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-bottom: 8px;
  color: #b9b9b9;
  font-size: 20px;
}
.tips1 {
  width: 724px;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(55, 55, 55, 0.2);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 45px auto;
}
.tips2 {
  width: 724px;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(55, 55, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 45px auto 100px;
}
.centtip {
  margin: 45px auto;
  width: 90%;
}
</style>
